<template>
  <div id="async_box">
      <div class="async">
        <div class="async_tab">
          <span class="li-tab" v-for="(item,index) in tabsParam"
          @click="toggleTabs(index)"
          :class="[{active:index===nowIndex},{cur:nowIndex==index}]">{{item}}
        </span>
        </div>
      </div>
      <div class="async_tabbox">
          <all v-show="nowIndex===0"></all>
          <pending v-show="nowIndex===1"></pending>
          <success v-show="nowIndex===2"></success>
          <error v-show="nowIndex===3"></error>
      </div>
  </div>
</template>
<script>
import all from "@/components/second/secondlist/all"           //异步互推合作全部
import pending from "@/components/second/secondlist/pending"           //异步互推合作待处理
import success from "@/components/second/secondlist/success"           //异步互推合作成功
import error from "@/components/second/secondlist/error"           //异步互推合作失败

export default {
  name: 'newCreate',
  components:{
    // all,pending,success,error
    'all': function(resolve) {
        require(['@/components/second/secondlist/all.vue'], resolve);
    },
    'pending': function(resolve) {
        require(['@/components/second/secondlist/pending.vue'], resolve);
    },
    'success': function(resolve) {
        require(['@/components/second/secondlist/success.vue'], resolve);
    },
    'error': function(resolve) {
        require(['@/components/second/secondlist/error.vue'], resolve);
    }
  },
  data() {
    return{
      tabsParam:['全部','待处理','成功','失败'],
      nowIndex:1,
      isShow:false
    }
  },
  methods:{
    //切换tab项
    toggleTabs(index){
      this.nowIndex = index;
      //$(window).resize();
    }
  }
}
</script>
<style lang="scss" scoped>
.cur{
  color:rgb(255,255,255);
}
.async{
  width:100%;
  height:100%;
  position: fixed;
  background: rgb(247,247,247);
  background-image:url("./img/a.png");
  background-repeat: no-repeat;
  background-size: 100% 1.45rem;
}
.async_tab{
  width:100%;
  display:flex;
  justify-content: space-around;
  color:rgba(255,255,255,0.65);
  font-size:0.14rem;
  position:fixed;
  top:0.7rem;
}
.async_tabbox{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  position:fixed;
  top:1.03rem;
  overflow-y: scroll;
  overflow-x: hidden;
}

</style>
